<template>
  <div class="content">
    <div class="title">
      <!-- <img src="@/assets/img/titlebg.png" alt=""> -->
      <div class="titleft" >{{ timeNow }}</div>
      <div class="titleStore">{{ storeTitle }}</div>
      <div class="timeNow">郑州天气：{{  tem }}  {{ wea }}°C</div>
    </div>
    <div class="bottom">
      <div class="left">
        <div class="pieChart">
          <div>
            <img style="width: 1.1094rem; height: 0.2708rem" src="../../assets/imgs/xiaoshouehanbi.png" alt="" />
          </div>
          <!-- 品类销售 -->
          <PurchaseChart></PurchaseChart>
        </div>
        <div class="goodsChart">
          <div>
            <img style="width: 1.1094rem; height: 0.2708rem" src="../../assets/imgs/qirixiaoshou.png" alt="" />
          </div>
          <!-- 商品排行 -->
          <MsgCharts ref="goodsChartRef"></MsgCharts>
        </div>
      </div>
      <div class="center">
        <div class="bgCenter">
          <BgCenter ref="BgCenter" :optionDatas="bgCenterOptionDatas"></BgCenter>
        </div>
        <div class="tokenbgc">
          <div class="tokentitle">
            <img style="width: 1.1875rem; height: 0.2708rem" src="../../assets/imgs/tokentitle.png" alt="" />
          </div>
          <!-- 通证走势 -->
          <TokenUpChart></TokenUpChart>
        </div>
      </div>
      <div class="right">
        <div class="moneyChart">
          <div class="tokentitle">
            <img style="width: 1.1979rem; height: 0.2708rem" src="../../assets/imgs/qiridianpu.png" alt="" />
          </div>
          <MoneyCharts ref="moneyChartsRef"></MoneyCharts>
        </div>
        <div class="msgChart">
          <div class="tokentitle">
            <img style="width: 1.1875rem; height: 0.2708rem" src="../../assets/imgs/mendianjiaoyi.png" alt="" />
          </div>
          <CenterCharts ref="cenetrEchartsRef" :cashierOrderList="msgLists"></CenterCharts>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import Charts from '@jiaminghi/charts'
import axios from 'axios'
import PurchaseChart from "@/components/echarts/PurchaseChart";
import MsgCharts from "@/components/echarts/MsgCharts";
import MoneyCharts from "@/components/echarts/MoneyCharts";
import TokenUpChart from "@/components/echarts/TokenUpChart";
import CenterCharts from "@/components/echarts/CenterCharts";
import BgCenter from "@/components/BgCenter";
import { connectWebsocket, closeWebsocket } from "@/utils/websocket.js";
import { login, getScreenData, getUserSid } from "@/api/user";
import md5 from "md5";
import { getToken, setSid, getSid, removeToken } from "@/utils/auth";
// import {getSid} from
export default {
  name: "IndexPage",
  components: {
    PurchaseChart,
    MsgCharts,
    MoneyCharts,
    TokenUpChart,
    CenterCharts,
    BgCenter,
  },
  data() {
    return {
      userName:
        process.env.NODE_ENV === "development" ? "15936415057" : "store",
      password: process.env.NODE_ENV === "development" ? "123456" : "123456",
      token: "",
      timeNow: "",
      date: "",
      msgLists: [],
      msgList: [],
      sid: "",
      storeTitle: "门店可视化展示",
      bgCenterOptionDatas: {
        noworder: "",
        number: null,
      },
      // dateAndWeek: '',
      wea: '',
      tem: ''
    };
  },
  created() {
    // this.login()
    console.log(1111111111111);
    this.getWeaAndTem();
  },
  mounted() {
    if (getToken()) {
      // this.msgScrollReset();
      this.getScreenData();
      // this.getUserSid();
    }
    console.log(2222222222222);
    this.date = setInterval(this.getTime, 1000);
    const that = this;
    // 监听浏览器窗口变化
    if (getSid()) {
      connectWebsocket(
        // 地址
        // "ws://192.168.3.18:9105/websocket/" + getSid(),
        // 'ws://8.141.7.66:9105/websocket/' + getSid(),
        // "wss://www.yukukeji.com/ws/erp/websocket/" + getSid(),
        process.env.VUE_APP_WEBSOCKET_URL + getSid(),
        // "ws://192.168.3.17:9105/websocket/" + getSid(),
        // 传递给后台的数据
        {},
        // 成功拿到后台返回的数据的回调函数
        (res) => {
          const datas = JSON.parse(res);
          console.log(res, "拿到结果");
          // const result = datas.data.data
          console.log(datas, "返回结果，拿到之后该干啥干啥吧！");
          // if()
          this.msgLists = [...datas.storeScreenShoppingList];
          // this.bgCenterOptionDatas.noworder = datas.noworder;
          // this.bgCenterOptionDatas.number = datas.tokenSum;
          this.$refs.BgCenter.updateText(datas.todayOrder, datas.tokenSum);
          that.msgScrollReset();
        },
        // websocket连接失败的回调函数
        (res) => {
          // console.log('失败的回调函数')
          console.log(res, "shibai");
        }
      );
    } else {
      removeToken();
    }
  },
  beforeDestroy() {
    clearInterval(this.date);
    closeWebsocket();
    removeToken();
  },
  methods: {
    // // 封裝格式化日期    //
    getTime() {
      var date = new Date(); // 获取当前时间
      // 判断时间到

      var y = date.getFullYear();
      var m = date.getMonth() + 1; // 返回的0-11 所有加1
      var d = date.getDate();
      var x = date.getDay(); // 返回的是 0-6
      // 创建一个数组存储星期 返回值当索引进行调用
      var arr = [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
      ];
      var h = date.getHours();
      h = h < 10 ? "0" + h : h; // 小于10时在前面补0 统一格式
      var mi = date.getMinutes();
      mi = mi < 10 ? "0" + mi : mi;
      var se = date.getSeconds();
      se = se < 10 ? "0" + se : se;
      this.timeNow =
        y +
        "-" +
        m +
        "-" +
        d +
        "   " +
        arr[x] +
        "     " +
        h +
        ":" +
        mi +
        ":" +
        se;
      if (h == '10' && mi == '00' && se == '00') {
        console.log("时间到了");
        location.reload();
      }
      // return y + '年' + m + '月' + d + '日' + h + '小時' + mi + '分钟' + se + '秒' + arr[x]
    },
    msgScrollReset() {
      // 刷新购买滚动数据
      this.$refs.cenetrEchartsRef.reset();
      // 刷新金额
      this.$refs.moneyChartsRef.getStoreUSDMillions();
      // 刷新商品排行
      this.$refs.goodsChartRef.getStoreBestSellers();
    },
    async getScreenData() {
      const res = await getScreenData();
      if (res.code === 200) {
        this.msgLists = res.data.storeScreenShoppingList;
        this.storeTitle = res.data.storeName
          ? res.data.storeName
          : "门店可视化展示";
        // console.log(res.data, "res.data111111");
      }
    },
    async getUserSid() {
      const res = await getUserSid();
      if (res.code === 200) {
        // console.log(res, "sid");
        const data = res.data;
        // console.log(data, "用户数据");
        this.sid = data.data;
        setSid(this.sid);
      }
    },
    getWeaAndTem() {
      axios({
        methods: 'get',
        url: 'https://api.seniverse.com/v3/weather/now.json',
        headers: {},
        params: {
          key: 'S0iWKy23OH6dJRMdo',
          location: 'zhengzhou',
          language: 'zh-Hans',
          unit: 'c'
        },
      })
        .then((res) => {
          // const date = res.data.date;
          // const week = res.data.week;
          // this.dateAndWeek = date + week;
          this.wea = res.data.results[0].now.temperature;
          this.tem = res.data.results[0].now.text;
          // this.tem = res.data.tem;
          console.log('天气', res.data, this.wea, this.tem);
        })
        .catch((error) => {
          console.log(error);
        });
    }
  },
};
</script>

<style scoped lang="scss">
.content {
  box-sizing: border-box;
  /* background-color: #070c2a; */
  background: url(../../assets/imgs/bgImg.png) no-repeat center 0px;
  background-size: contain;
  padding: 0;
  width: 10rem;
  height: 5.625rem;
  margin: 0;

  .title {
    width: 100%;
    height: 0.3177rem;
    background: url(../../assets/img/titlebg.png) no-repeat center;
    background-size: contain;
    display: flex;

    .titleft {
      width: 33%;
      box-sizing: border-box;
      display: inline-block;
      font-size: 0.0833rem;
      color: #00a3ff;
      padding-top: 0.1823rem;
      padding-left:1.9792rem;
    }

    .titleStore {
      width: 33%;
      text-align: center;
      margin: 0 auto;
      display: inline-block;
      font-size: 0.125rem;
      padding-top: 0.0885rem;
      font-weight: bold;
      color: #eaf1fe;
      text-shadow: 0px 5px 8px rgba(6, 24, 60, 0.14);
      background: linear-gradient(0deg, #2fa4ee 0%, #ffffff 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .timeNow {
      width: 33%;
      box-sizing: border-box;
      display: inline-block;
      font-size: 0.0833rem;
      color: #00a3ff;
      padding-top: 0.1823rem;
      padding-left: 0.3125rem;
    }
  }

  .bottom {
    width: 100%;
    /* height: 100%; */
    display: flex;
    padding: 0.1563rem;
    /* padding-top: 0.0521rem; */
    justify-content: space-between;
    color: aliceblue;

    .left {
      width: 2.9583rem;

      /* margin-right: .1563rem; */
      .pieChart {
        margin-bottom: 0.1563rem;
        width: 2.9583rem;
        height: 1.6979rem;
        background: url(../../assets/imgs/leftone.png) no-repeat center 0px;
        background-size: contain;
      }

      .goodsChart {
        width: 2.9583rem;
        height: 3.1354rem;
        background: url(../../assets/imgs/lefttwo.png) no-repeat center 0px;
        background-size: contain;
      }
    }

    .center {
      flex: 1;
      position: relative;

      .bgCenter {
        width: 3.6458rem;
        height: 3.6458rem;
        background-color: RGBA(4, 7, 69, 1);
        margin: 0 auto;
      }

      .tokenbgc {
        z-index: 999;
        position: absolute;
        /* padding: .1042rem .1563rem; */
        bottom: 0;
        margin: 0 0.1563rem;
        width: 3.4583rem;
        height: 1.6042rem;
        background: url(../../assets/imgs/tokenbgc.png) no-repeat center;
        background-size: contain;

        .tokentitle {
          /* padding: ; */
          /* width: 1.1042rem;
          height: 0.1563rem; */
        }
      }
    }

    .right {
      width: 2.9583rem;

      .moneyChart {
        margin-bottom: 0.1563rem;
        width: 2.9583rem;
        height: 1.6979rem;
        background: url(../../assets/imgs/leftone.png) no-repeat center 0px;
        background-size: contain;
      }

      .msgChart {
        width: 2.9583rem;
        height: 3.1354rem;
        background: url(../../assets/imgs/lefttwo.png) no-repeat center 0px;
        background-size: contain;
      }
    }
  }

  .title1 {
    font-size: 0.0938rem;
    font-weight: bold;
    color: #bdd1ff;
    line-height: 0.1406rem;
    display: flex;
    text-shadow: 0px 0px 0.0938rem #7586de;
    vertical-align: middle;

    .jiantou {
      width: 0.1406rem;
      height: 0.1406rem;
      margin-left: 0.151rem;
    }
  }
}
</style>
